<!doctype html>
<html lang="en-us">

  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.png">
  
    <title>Jumbotron Template for Bootstrap</title>
  
  
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap-theme.min.css" rel="stylesheet">
    
    <!-- Custom styles for this template -->
    <!-- <link href="http://v3.bootcss.com/examples/jumbotron/jumbotron.css" rel="stylesheet"> -->
  
    <style>
      body { padding-top: 50px; }
      form label { width:100px;display:inline-block;float:left; }
      form input[type="button"] { width:50px; }
      form input[type="text"] { width:200px; }
      form textarea { width:100%; height:300px;}
      table {border-spacing:0; border:solid 1px gray;}
      table td { border:solid 1px gray;}
    </style>
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">sql2json</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <div class="starter-template">
        <h1></h1>
        <p class="lead"></p>
        <form action="">
          <label>Sql</label>
          <br/>
          <textarea id="sql"/>select * from t_test</textarea>
          <br/>
          <label>Debug</label>
          <input type="checkbox" id="debug"/>
          <br/>
          
          <label>Actions</label>
          <input id="get" type="button" value="get"/>
          <input id="post" type="button" value="post"/>
          <input id="clean" type="button" value="clean"/>
          <br/>
          
          <label>Result</label> <br/>
          <div id="result"></div><br/>
          
          <label>Response</label> <br/>
          <pre><div id="response"></div></pre>
        </form>
      </div>

    </div><!-- /.container -->
    
</body>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<!-- http://code.jquery.com/jquery-1.10.2.min.js -->
<!-- <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script> -->

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script><!--
$(document).ready(function(){
	var execSql = function(method){
		var sql = $("#sql").val();
		console.log(sql);
		$.ajax({url:"sj/-sql", data: {sql: sql}, dataType:"json", method:method,
			success:function(data, status, xhr){
				if ($("#debug").attr('checked') == true) {
					$("#response").html(xhr.responseText);
				}
				var html = "<table><tbody>\n";
				if (data.count > 0) {
					html += "<tr>";
					for (var name in data.rset[i]) {
						html += "<th>" + name + "</th>";
					}
					html += "</tr>\n";
				}
				for (var i = 0; i < data.count; i ++) {
					html += "<tr>";
					for (var name in data.rset[i]) {
						html += "<td>" + data.rset[i][name] + "</td>";
					}
					html += "</tr>\n";
				}
				html += "</tbody></table>\n";
				$("#result").html(html);
			},
			error:function(xhr, status, e){
				if ($("#debug").attr('checked') == true) {
					$("#response").html(xhr.responseText);
				}
				$("#result").html("error " + xhr.responseText);
			}
		});
	}
	
	$("#get").click(function () {execSql("GET");});
	$("#post").click(function () {execSql("POST");});
	$("#clean").click(function () {
		$("#sql").val("");
		$("#result").html("");
		$("#response").html("");
	});
});
//-->
</script>

</html>
